<template>
  <div class="login-page">
    <div class="login-box">
      <h2>登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="input-group">
          <label for="email">邮箱</label>
          <input type="text" id="email" v-model="user.email" placeholder="请输入邮箱" />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="user.password" placeholder="请输入密码" />
        </div>
        <button type="submit" class="login-btn">登录</button>
        <div style="display: flex">
          <p class="link" style="flex: 1">还没有账号？<a @click.prevent="goToRegister" href="#">注册</a></p>
        </div>
        <p class="link" ><a href="#">返回</a></p>
<!--        <p></p>-->
<!--        <button type="submit" class="login-btn">管理员登录</button>-->
<!--        <p class="signup-link">还没有账号？<a @click.prevent="goToRegister" href="#">注册</a></p>-->
      </form>
    </div>
  </div>
</template>


<script>
import {userLoginService} from "@/api/user";

export default {
  name: 'Login',
  data() {
    return {
      user: {
        email: '',
        password: ''
      },
      // rules: {
      //   email: [{required: true, message: '请输入邮箱', trigger: "blur"}],
      //   password: [{required: true, message: '请输入密码', trigger: "blur"}],
      // }
    }
  },

  methods: {
    async handleLogin() {
      if (this.user.email && this.user.password) {
        let result = await userLoginService(this.user);
        if (result.code === "0") {//后端响应成功
          alert('登录成功！');
          this.$router.push('/');
          localStorage.setItem("token", result.data);
        } else {
          alert(result.message ? result.message : '登录失败！请重新登录。');
        }
      } else {
        alert('请输入邮箱和密码');
      }
    },
    goToRegister() {
      this.$router.push('/AIORegister');
    }
  }
}
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: #fff;
}

.login-box {
  background-color: #222;
  padding: 40px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.login-box h2 {
  margin-bottom: 20px;
  font-size: 24px;
}


.input-group {
  margin-bottom: 20px;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
}

.input-group input::placeholder {
  color: #aaa;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #ffcd00;
  color: #000;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #e5b800;
}

.link {
  margin-top: 20px;
  font-size: 14px;
}

.link a {
  color: #ffcd00;
  text-decoration: none;
}

.link a:hover {
  text-decoration: underline;
}
</style>
